<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="我的收货地址"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >

            <!-- 地址列表组件 -->
            <div class="address-list">
                <div
                    class="address-item"
                    v-for="(item,index) of addressList"
                    :key="index"
                >
                    <div
                        class="user-first-name"
                        v-html="item.name.slice(0,1)"
                    ></div>
                    <div
                        class="address-info"
                        @click="selectAddress(item)"
                    >
                        <div class="user-name-phone">{{item.name}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.phone}}</div>
                        <div class="address-detail"><span
                                class="address-default"
                                v-if="item.addressDefault == true"
                            >默认</span>{{item.region_txt+' '+item.detail}}</div>
                    </div>
                    <div
                        class="address-edit-btn"
                        @click="goEdit(index)"
                    >编辑
                    </div>
                </div>
            </div>
            <!-- 地址列表组件 -->

        </common-scroll>
        <!-- 共用页面滚动组件 -->

        <!-- 添加地址组件 -->
        <router-link
            tag="div"
            to="/address/add"
            class="add-address-btn"
        >添加新地址</router-link>
        <!-- 添加地址组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
export default {
    name: 'Address',
    components: {
        CommonHeader,
        CommonScroll
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '1.3rem'
            },
            addressList: []
        }
    },
    mounted() {
        this.getAddressList()
    },
    methods: {
        getAddressList() {
            this.axios.post('/api/user/address/list.json').then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.addressList = data.data
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        goEdit(index) {
            this.$router.push({
                path: '/address/edit',
                query: { addressInfo: this.addressList[index] }
            })
        },
        selectAddress(value) {
            if (this.$route.query.addressType == 'select') {
                sessionStorage.setItem('cart_address', JSON.stringify(value))
                this.$router.back(-1)
            } else if (this.$route.query.addressType == 'groupOrder') {
                let postData = this.qs.stringify({
                    order_id: this.$route.query.orderId,
                    address_id: value.id
                })
                this.axios
                    .post('/api/orders/change_address.json', postData)
                    .then(res => {
                        const data = res.data
                        if (data.status == 1) {
                            this.$router.back(-1)
                        } else {
                            this.commonDialog.alert('提示', data.msg)
                        }
                    })
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.address-list
    padding-left 0.37rem
    background #fff
    .address-item
        display flex
        align-items center
        height 2.16rem
        border-bottom 1px solid #e5e5e5
        box-sizing border-box
        .user-first-name
            width 0.92rem
            height 0.92rem
            line-height 0.92rem
            text-align center
            font-size 0.38rem
            color #fff
            background #ccc
            border-radius 100%
        .address-info
            flex 1
            min-width 1px
            padding 0 0.37rem
            .user-name-phone
                font-size 0.38rem
                color #333
            .address-detail
                margin-top 0.18rem
                font-size 0.33rem
                color #666
                line-height 1.3
                .address-default
                    display inline-block
                    width 0.81rem
                    height 0.4rem
                    line-height 0.4rem
                    text-align center
                    background #ffbab8
                    font-size 0.29rem
                    color #d7463c
                    border-radius 1px
                    margin-right 0.18rem
        .address-edit-btn
            width 1.38rem
            height 0.5rem
            line-height 0.5rem
            text-align center
            font-size 0.38rem
            color #999
            border-left 1px solid #e5e5e5
            box-sizing border-box
    .address-item:last-child
        border none
.add-address-btn
    position absolute
    bottom 0
    left 0
    right 0
    height 1.3rem
    line-height 1.3rem
    text-align center
    font-size 0.38rem
    color #fff
    background #d7463c
</style>
